<template>
	<view class="content" ref="pageContainer" >
		<scroll-view 
		scroll-y="true"  
		lazy-load
		@scroll="handleScroll">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="2000">
					<swiper-item class="swiper-item-item" v-for="(item,index) in swiperindex" :key="index" @tap="showimg(item)">
						<view class="swiper-item-item">
							<image class="swiimg" :src="item.img" mode="widthFix"></image>
						</view>
					</swiper-item>
					
				</swiper>
				<!-- icons组成 -->
				<icons :indexIcons="indexIcons" />
				
				<!-- 名师介绍 -->
				<uni-card >
					<card :tealist="teacheslist"></card>
				</uni-card>
				<uni-card >
					<view style="width: 100%;background-color: #FFF;">
						<view style="display: flex;justify-content: center;">
							<image style="width: 50rpx;height: 50rpx;" src="../../static/img/index/num1.png" mode="aspectFill"></image>
						</view>
						<view style="display: flex;justify-content: center;font-weight: 600;font-size: 40rpx;padding: 20rpx 0;color: #16b173;font-weight: 800;">
							抓住孩子成长关键期
						</view>
						<view style="display: flex;justify-content: center;">
							<image  src="../../static/img/index/1712159118545.jpg" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="" v-for="(item,index) in pd_top_lg" :key="item.id">
								<uni-card >
									<view :style="{color: item.color}">
										{{item.title}}
									</view>
									<view class="">
										{{item.content}}
									</view>
								</uni-card>
								
							</view>
						</view>
						<view class="">
							<image style="width: 100%;" src="../../static/img/index/1712160263010.jpg" mode="widthFix"></image>
						</view>
					</view>
				</uni-card>
			
				<!-- 课程介绍内容 -->
				<uni-card >
					<view class="content-s" style="margin-top: 10rpx;">
						<view style="display: flex;justify-content: center;">
							<image style="width: 50rpx;height: 50rpx;" src="../../static/img/index/num2.png" mode="aspectFill"></image>
						</view>
						<view class="top">
							<view class="top-t">
								<view class="top-l">
									亲子课程
								</view>
								<view class="top-r">
									介绍
								</view>
							</view>
							<view class="top-b">
								COURSE INTRODUCTION
							</view>
						</view>
						<view class="bot">
							<view class="bot-item" v-for="(item,index) in bot" :key="item.id">
								<view class="bot-item-title">
									{{item.title}}
								</view>
								<view class="bot-line">
								</view>
							</view>
						</view>
					</view>
				</uni-card>
				
				<uni-card >
					<view class="">
						<view style="display: flex;justify-content: center;">
							<image style="width: 50rpx;height: 50rpx;" src="../../static/img/index/num3.png" mode="aspectFill"></image>
						</view>
						<view style="display: flex;justify-content: center;font-weight: 600;font-size: 40rpx;color: #16b173;font-weight: 800;">
							陆大成长领域
						</view>
						<view style="padding: 10rpx; font-size: ;">
							<view class="">
								<view class="sm">
									依托于中国个个高校的学术背景，
								</view>
								<view class="sm">
									以浸入式汉语为主线，
								</view>
								<view class="sm">
									结合中国教育部层次教育理念,
								</view>
								<view class="sm">
									蒙台梭利教育方法贯穿7大成长领域,
								</view>
								<view class="sm">
									进行以能力素养为导向的游戏、自由探索、体验式学习
								</view>
							</view>
						</view>
						<view style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding: 10rpx 0;">
							<view class="grow3all" v-for="(item,index) in grow3all" :key="item.id">
								<view class="">
									<image class="grow3img" :src="item.img" mode=""></image>
								</view>
								<view class="">
									{{item.title}}
								</view>
							</view>
						</view>
					</view>
				</uni-card>
				
				<!-- 课程模式 -->
				<uni-card >
					<view style="display: flex;justify-content: center;">
						<image style="width: 50rpx;height: 50rpx;" src="../../static/img/index/num4.png" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="conall">
							<view class="top">
								<view class="tf" style="color: #16b173;font-weight: 800;">
									课全 趣多
								</view>
							</view>
							<view class="bot">
								<view class="bot-item" :style="{backgroundColor : item.color}" v-for="(item,index) in picbox" :key="item.id">
									{{item.title}}
								</view>
							</view>
						</view>
						
					</view>
				</uni-card>
				<uni-card >
					<view class="pub">
						<view class="pub-text">
							我们的优势
						</view>
						<view class="pub-one">
							优势一: 转变教育观念
						</view>
						<view class="pub-content">
							提供专业指导师服务，帮助家长转变知识导向观念，制定科学的教育规划，提升家长教育认知水平。
						</view>
						<view class="pub-tow">
							优势二：能力、素养导向教育
						</view>
						<view class="pub-content">
							<view class="">
								 强调家长以能力、
							</view>
							<view class="">
								素养导向教育孩子，培养孩子
							</view>
							<view class="">
								独立发现、看待、解决问题的能力。
							</view>
						</view>
						<view class="pub-three">
							优势三：个性化教学
						</view>
						<view class="pub-content">
							通过家长与指导师的沟通和亲子互动，将参数输入到模型，实现个性化教学和指导，帮助家长和孩子更好地成长。
						</view>
						<view class="pub-one">
							优势四：亲子团体学习
						</view>
						<view class="pub-content">
							提供能力素养导向的亲子课程，将亲子视为团体，互相学习，提升孩子综合能力。
						</view>
						<view class="pub-five">
							优势五：填补传统教育缺陷
						</view>
						<view class="pub-content">
							<view class="">
								 填补老师单方面授课方式的缺陷，通过亲子课程和指导师服务，提供更全面的教育体验。
							</view>
							<view class="">
								培养三好学生
							</view>
							<view class="">
								“好家风”、“好能力”、“好素质”
							</view>
						</view>
						<view class="pub-six">
							优势六：科学规划和教育认知提升
						</view>
						<view class="pub-content">
							<view class="">
								指导师服务帮助制定科学规划，提升家长教育认知，为家庭成员提供更专业的教育支持。
							</view>
						</view>
					</view>
				</uni-card>
				<!-- 我们的优势 -->
				
			
		</scroll-view>
		<tarbar currentPage="index"></tarbar>
		
	</view>
</template>

<script>
	import tarbar from '@/common/tabbar.vue'
	import icons from '@/components/index/Icons.vue'
	import card from '@/components/index/card.vue'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				indexIcons:JSON.parse(sessionStorage.getItem('seesion_indexIcons')) || [],//图标库icon
				rIcons:JSON.parse(sessionStorage.getItem('seesion_rIcons')) || [],//课程中心icons
				teacheslist:JSON.parse(sessionStorage.getItem('seesion_teacheslist')) || [],//接收教师信息
				
				bot:[],//课程介绍内容
				picbox:[],//课程模式,
				swiperindex:[],
				scrollTop: 0,
				viewheight:0,
				pd_top_lg:[
					{id:1,title:"BRAIN ",content:"孩子大脑发育关键期，提升记忆力/专注力、创想力和思维逻辑思维能力和自然认知能力，以及数字、语言、感官空间概念等各方面的认知。",color:"#60c3e7"},
					{id:2,title:"MIND ",content:"培养孩子社会能力和自我认知能力，包括生活习惯、情商性格团队协作、环境适应、敏捷度等运动能力；",color:"#eb5d45"},
					{id:3,title:"BODY ",content:"通过运动课程环节，提升宝宝运动能力和身体体质：力量、平衡性协调能力、敏捷度等运动能力，加强体质和抵抗力。",color:"#dd61a0"},
					{id:4,title:"COMPREHENSIVE ABILITY  ",content:"孩子的成长关键期，寓教于乐的给予孩子在心智、性格、体能和智能的综合能力关键帮助全面提升孩子的综合素养。",color:"#eb5d45"}
				],
				grow3all:[
					{id:1,img:"../../static/img/index/grow1.jpg",title:"身体运动"},{id:2,img:"../../static/img/index/grow2.jpg",title:"语音认知"},
					{id:3,img:"../../static/img/index/grow3.jpg",title:"科学智能"},{id:4,img:"../../static/img/index/grow4.jpg",title:"情感社交"},
					{id:5,img:"../../static/img/index/grow5.jpg",title:"国际文化"},{id:6,img:"../../static/img/index/grow6.jpg",title:"艺术创新"},
					],
					provide_img:[]
			}
		},
		//组件引入:
		components: {
			tarbar,
			icons,
			card
		},
		//生命周期函数:
		onLoad() {
			if(! JSON.parse(sessionStorage.getItem('seesion_teacheslist')) ){
				this.getteacheslist();
			}
			if(! JSON.parse(sessionStorage.getItem('seesion_indexIcons'))){
				this.getindexIcons();
			}
			this.getindexdatalist();
			
			
		},
		//方法调用:
		methods: {
			handleScroll(event) {
				  //
			      this.scrollTop = event.detail.scrollTop;
				  
			    },
			//照片处理:
			newString(originalString){
				return originalString.map(item=>{
					item.URLIMG =  `https://zyc618.mynatapp.cc/${item.img}`
					 return item
				})
				
			},
			//获取首页教师列表:
			getteacheslist(){
				$http.request({
					url: "/getimgname"
				}).then((res) => {
					console.log(res);
					if(res.code == 200){
						this.teacheslist = this.newString(res.data);
						
					}
					//截取10位最多
					
					
				}).catch(() => {
					uni.showToast({
						title: "获取教师数据失败",
						icon: "none",
						mask: true,
						duration: 1000
					})
				})
			},
			//8个icon图标:
			getindexdatalist(){
				$http.request({
					url: "/indexdatalist"
				}).then((res) => {
					this.rIcons = res.rIcons.data;
					
					this.picbox = res.picbox;
					this.bot = res.bot;
					this.swiperindex = res.swiperindex.data;
					this.swiperindex.forEach(item =>{
						this.provide_img.push(item.img)
					})
					// this.provide_img.push(item.img)
				}).catch(() => {
					uni.showToast({
						title: "icon",
						icon: "none",
						mask: true,
						duration: 1000
					})
				})
			},
			//八个图标icon
			getindexIcons(){
				$http.request({
					url: "/getindexIcons"
				}).then((res) => {
					this.indexIcons = res.map(item =>{
						item.img =  `https://zyc618.mynatapp.cc${item.img}`
					 return item
				})
				}).catch(() => {
					uni.showToast({
						title: "获取数据失败",
						icon: "none",
						mask: true,
						duration: 1000
					})
				})
			},
			goaboutgrade(index){
				uni.navigateTo({
					url:`/pages/about/about?grade=${JSON.stringify(this.rIcons.data[index])}`
				})
			},
			showimg(src){
				uni.previewImage({
					urls: this.provide_img,
					
				});
			}
		},
		
		mounted() {
			// this.viewheight = uni.getSystemInfoSync().windowHeight;
		},
		watch:{
			teacheslist:{
				deep:true,
				handler(){
					let seesion_teacheslist = JSON.stringify(this.teacheslist);
					//设置本地存储:sessionStorage
					sessionStorage.setItem("seesion_teacheslist",seesion_teacheslist);
				}
			},
			rIcons:{
				deep:true,
				handler(){
					let seesion_rIcons = JSON.stringify(this.rIcons);
					//设置本地存储:sessionStorage
					sessionStorage.setItem("seesion_rIcons",seesion_rIcons);
				}
			},
			indexIcons:{
				deep:true,
				handler(){
					let seesion_indexIcons = JSON.stringify(this.indexIcons);
					//设置本地存储:sessionStorage
					sessionStorage.setItem("seesion_indexIcons",seesion_indexIcons);
				}
			}
		}
		
	}
</script>

<style lang="scss">
	swiper {
		width: 100%;
		height: 450rpx;
		.swi-img{
			height: 450rpx;
		}
		
	}

	.topimg {
		width: 100%;
	}
	.content {
		width: 100%;
		padding-bottom: 120rpx;
		.conall {
			.top {
				text-align: center;
				
				.tf {
					line-height: 100rpx;
					font-size: 40rpx;
					font-weight: 800;
					
				}

				.bf {
					line-height: 100rpx;
					font-weight: 800;
					font-size: 60rpx;
					padding: 0 0 20rpx 0;
				}
			}
			
			.bot {
				border-radius: 30rpx;
				padding: 0 20rpx;
				display: flex;
				flex-wrap: wrap;
				.bot-item {
					border-radius: 60rpx 0 60rpx 0;
					padding: 50rpx 20rpx;
					margin: 20rpx 5rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #FFF;
				}
			}
			
		}
		.bot-item-title{
			font-size: 26rpx;
			color: #cd5a91;
			text-indent: 2em;
		}
		.content-s {
			.top {
				font-size: 40rpx;

				padding: 20rpx 0 30rpx;
				text-align: center;

				.top-t {
					display: flex;
					color: #16b173;
					font-weight: 800;
					justify-content: center;

					.top-r {
						color: #535353;
					}
				}

				.top-b {
					font-size: 20rpx;
				}
			}

			.bot {
				padding: 20rpx 10rpx;

				.bot-item {
					color: #16b173;
					font-size: 30rpx;
					font-weight: 800;
					line-height: 70rpx;
				}

				.bot-line {
					border: 1rpx dashed #16b173;
				}
			}
		}

		.ricos {
			.ic-t {
				font-size: 40rpx;
				padding: 10rpx 0;
				text-align: center;
				border-bottom: 2rpx solid #16b173;
				margin-bottom: 20rpx;
			}

			.dline {}

			.icons {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 80rpx;
				.icons-item {

					width: 33.3%;
					
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					align-items: center;

					.icons-img {
						width: 250rpx;
						height: 250rpx;

					}


				}
			}
		}
		.pub{
			font-weight: 800;
			padding: 10rpx;
			.pub-text{
				text-align: center;
				font-size: 40rpx;
				padding: 20rpx;
			}
			.pub-one{
				color: #fe5c74;
				padding: 10rpx;
			}
			.pub-tow{
				color: #40c58a;padding: 15rpx;
			}
			.pub-three{
				color: #4290ff;padding: 15rpx;
			}
			
			.pub-four{
				color: #fe9500;padding: 15rpx;
			}
			.pub-five{
				color: #cf55f6;padding: 15rpx;
			}
			.pub-six{
				color: #fe549f;padding: 15rpx;
			}
			.pub-content{
				font-size: 26rpx;
				padding: 15rpx 35rpx;
				font-family: 'Courier New', Courier, monospace;
			}
		}
	}
	.swiper-item-item{
		width: 100%;
		height: 150rpx;
		.swiimg{
			width: 100%;
			height: 150rpx;
		}
	}
	.grow3all{
		padding: 10rpx 40rpx;
	}
	.grow3img{
		width: 120rpx;
		height: 120rpx;
		border-radius: $uni-border-radius-circle;
		
	}
	.sm{
		font-size: 24rpx;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-align: center;
		padding:5rpx 0;
	}
</style>